<template>
  <div style="height: 100%; position: relative">
    <el-drawer
      title="添加开户信息"
      size="80%"
      :visible.sync="visible"
      :before-close="handleClose"
    >
      <el-form :model="ruleform" ref="ruleForm">
        <div class="left">
          <!-- 主题类型 -->
          <div class="titles">主体类型:</div>
          <el-form-item prop="merchant_type">
            <div class="tit"><span class="must-icon">*</span>主体类型:</div>
            <el-input v-model="ruleform.merchant_type" disabled> </el-input>
          </el-form-item>

          <!-- 营业执照/登记证书信息 -->
          <div class="titles">营业执照/登记证书信息:</div>
          <el-form-item
            prop="cert_image"
            :rules="[
              {
                required: true,
                message: '请上传证件扫描件',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>证件扫描件:</div>

            <el-upload
              v-if="keys == '1' || keys == '3'"
              :class="list1.length > 0 ? 'disable' : 'nodisable'"
              list-type="picture-card"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="
                (file, fileList) => flieSuccess(file, fileList, 'certificates')
              "
              :before-remove="
                (file, fileList) =>
                  removePicture(file, fileList, 'certificates')
              "
              :file-list="list1"
            >
              <i class="el-icon-plus"></i
            ></el-upload>
            <div v-else>
              <el-image
                v-if="ruleform.cert_image"
                style="width: 100px; height: 100px"
                :src="ruleform.cert_image"
                :preview-src-list="[ruleform.cert_image]"
                fit="fill"
              ></el-image>
            </div>
            <el-tooltip class="item tips" placement="top">
              <div slot="content">
                图片要求：<br />
                （1）请上传证件的彩色扫描件或彩色数码拍摄件，黑白复印件需加盖公章（公章信息需完整）
                。<br />
                （2）不得添加无关水印（非微信支付商户申请用途的其他水印）。<br />
                （3）需提供证件的正面拍摄件，完整、照面信息清晰可见。信息不清晰、扭曲、压缩变形、反光、不完整均不接受。<br />
                （4）不接受二次剪裁、翻拍、PS的证件照片。
              </div>
              <img class="tips_img" src="./img/ts.png" alt="提示" />
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="cert_no"
            :rules="[
              { required: true, message: '请输入证件注册号', trigger: 'blur' },
              {
                pattern:
                  /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/,
                message: '证件号码格式有误！',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>证件注册号:</div>
            <el-input v-model="ruleform.cert_no" placeholder="请输入">
            </el-input>
            <el-tooltip class="item tips" placement="top">
              <div slot="content">
                1、主体为“个体工商户/企业”时，请填写营业执照上的注册号/统一社会信用代码，须为15位数字或
                18位数字|大写字母。<br />
                2、主体为“党政、机关及事业单位/其他组织”时，请填写登记证书的证书编号。
              </div>
              <img class="tips_img" src="./img/ts.png" alt="提示" />
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="name"
            :rules="[
              { required: true, message: '请输入商户名称', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>商户名称:</div>
            <el-input v-model="ruleform.name" placeholder="请输入"> </el-input>
            <el-tooltip class="item tips" placement="top">
              <div slot="content">
                1、请填写营业执照/登记证书的商家名称，2~110个字符，支持括号
                。<br />
                2、个体工商户/党政、机关及事业单位，不能以“公司”结尾。<br />
                3、个体工商户，若营业执照上商户名称为空或为“无”，请填写"个体户+经营者姓名"，如“个体户张三”。
              </div>
              <img class="tips_img" src="./img/ts.png" alt="提示" />
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="legal_name"
            :rules="[
              {
                required: true,
                message: '请输入经营者/法人代表人姓名',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>经营者/法人代表人姓名:
            </div>
            <el-input v-model="ruleform.legal_name" placeholder="请输入">
            </el-input>
          </el-form-item>

          <el-form-item
            prop="alias_name"
            :rules="[
              {
                required: true,
                message: '商户别名',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>商户别名:</div>
            <el-input
              v-model="ruleform.alias_name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="binding_alipay_logon_id"
            :rules="[
              {
                required: true,
                message: '请输入签约支付宝账户',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>签约支付宝账户:
            </div>
            <el-input
              v-model="ruleform.binding_alipay_logon_id"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <!-- 证件类型 -->
          <div class="titles">经营者/法人证件信息:</div>
          <el-form-item prop="legal_cert_type">
            <div class="tit">
              <span class="must-icon">*</span>经营者/法人证件类型:
            </div>
            <el-select v-model="ruleform.legal_cert_type">
              <el-option
                v-for="item in accounttype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="legal_cert_front_image"
            :rules="[
              {
                required: true,
                message: '请上传身份证人像面照片',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>身份证人像面照片:
            </div>

            <el-upload
              v-if="keys == '1' || keys == '3'"
              :class="list2.length > 0 ? 'disable' : 'nodisable'"
              list-type="picture-card"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="
                (file, fileList) => flieSuccess(file, fileList, 'cardfront')
              "
              :before-remove="
                (file, fileList) => removePicture(file, fileList, 'cardfront')
              "
              :file-list="list2"
            >
              <i class="el-icon-plus"></i
            ></el-upload>
            <div v-else>
              <el-image
                v-if="ruleform.legal_cert_back_image"
                style="width: 100px; height: 100px"
                :src="ruleform.legal_cert_back_image"
                :preview-src-list="[ruleform.legal_cert_back_image]"
                fit="fill"
              ></el-image>
            </div>
          </el-form-item>

          <el-form-item
            prop="legal_cert_back_image"
            :rules="[
              {
                required: true,
                message: '请上传身份证国徽面照片',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>身份证国徽面照片:
            </div>

            <el-upload
              v-if="keys == '1' || keys == '3'"
              :class="list3.length > 0 ? 'disable' : 'nodisable'"
              list-type="picture-card"
              action="#"
              :limit="1"
              :auto-upload="false"
              :on-change="
                (file, fileList) => flieSuccess(file, fileList, 'cardback')
              "
              :before-remove="
                (file, fileList) => removePicture(file, fileList, 'cardback')
              "
              :file-list="list3"
            >
              <i class="el-icon-plus"></i
            ></el-upload>
            <div v-else>
              <el-image
                v-if="ruleform.legal_cert_front_image"
                style="width: 100px; height: 100px"
                :src="ruleform.legal_cert_front_image"
                :preview-src-list="[ruleform.legal_cert_front_image]"
                fit="fill"
              ></el-image>
            </div>
          </el-form-item>

          <el-form-item
            prop="legal_cert_no"
            :rules="[
              { required: true, message: '请输入身份证号码', trigger: 'blur' },
              {
                pattern:
                  /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
                message: '证件号码格式有误！',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>身份证号码:</div>
            <el-input v-model="ruleform.legal_cert_no" placeholder="请输入">
            </el-input>
          </el-form-item>
        </div>

        <!-- 结算银行账户 -->
        <div class="right">
          <div class="titles">结算:</div>
          <el-form-item
            prop="default_settle_type"
            :rules="[
              { required: true, message: '请选择结算类型', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>结算类型:</div>
            <el-select
              v-model="ruleform.default_settle_type"
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in settlementType"
                :key="item.label"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.usage_type"
            :rules="[
              { required: true, message: '请选择账户类型', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>账户类型:</div>
            <el-select
              v-model="ruleform.biz_cards.usage_type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in banktype"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_inst_name"
            :rules="[
              { required: true, message: '请输入开户行', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>开户银行:</div>
            <el-input
              v-model="ruleform.biz_cards.account_inst_name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_inst_name"
            :rules="[
              { required: true, message: '请输入银行简称', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>银行简称:</div>
            <el-input
              v-model="ruleform.biz_cards.account_inst_id"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_holder_name"
            :rules="[
              { required: true, message: '请输入开户名称', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>开户名称:</div>
            <el-input
              v-model="ruleform.biz_cards.account_holder_name"
              placeholder="请输入"
            ></el-input>
            <el-tooltip class="item tips" placement="top">
              <div slot="content">
                1、选择经营者个人银行卡时，开户名称必须与身份证姓名一致。<br />
                2、选择对公账户时，开户名称必须与营业执照上的“商户名称”一致。
              </div>
              <img class="tips_img" src="./img/ts.png" alt="提示" />
            </el-tooltip>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_no"
          >
            <div class="tit"><span class="must-icon"></span>银联号:</div>
            <el-input v-model="ruleform.biz_cards.bank_code"></el-input>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_inst_province"
            :rules="[
              { required: true, message: '请选择开户省市', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>开户银行省市:</div>
            <el-cascader
              v-model="ruleform.biz_cards.account_inst_province"
              :options="city"
            ></el-cascader>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_type"
            :rules="[
              { required: true, message: '请选择卡类型', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>卡类型:</div>
            <el-select
              v-model="ruleform.biz_cards.account_type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardtype"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_branch_name"
            :rules="[
              { required: true, message: '请输入开户支行', trigger: 'blur' },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>开户银行全称(含支行):
            </div>
            <el-input
              v-model="ruleform.biz_cards.account_branch_name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="ruleform.default_settle_type == 'bankCard'"
            prop="biz_cards.account_no"
            :rules="[
              { required: true, message: '请输入银行账号', trigger: 'blur' },
            ]"
          >
            <div class="tit"><span class="must-icon">*</span>银行账号:</div>
            <el-input
              v-model="ruleform.biz_cards.account_no"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->

          <el-form-item
            prop="alipay_logon_id"
            :rules="[
              {
                required: true,
                message: '请输入结算支付宝账户',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>结算支付宝账户:
            </div>
            <el-input
              v-model="ruleform.alipay_logon_id"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <div class="titles">商户联系人信息:</div>
          <el-form-item
            prop="contact_infos.name"
            :rules="[
              { required: true, message: '请输入联系人姓名', trigger: 'blur' },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>商户联系人姓名:
            </div>
            <el-input
              v-model="ruleform.contact_infos.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="contact_infos.mobile"
            :rules="[
              {
                required: true,
                message: '请输入联系人手机号',
                trigger: 'blur',
              },
              {
                pattern:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '手机号格式有误！',
                trigger: 'blur',
              },
            ]"
          >
            <div class="tit">
              <span class="must-icon">*</span>商户联系人手机:
            </div>
            <el-input
              v-model="ruleform.contact_infos.mobile"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item prop="contact_infos.id_card_no">
            <div class="tit">
              <span class="must-icon"></span>商户联系人身份证件号码:
            </div>
            <el-input
              v-model="ruleform.contact_infos.id_card_no"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item prop="contact_infos.email">
            <div class="tit">
              <span class="must-icon"></span>商户联系人邮箱:
            </div>
            <el-input
              v-model="ruleform.contact_infos.email"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <el-button
        class="sunmit_btn"
        v-if="keys == '1' || keys == '3'"
        @click="handleClose"
        >取消</el-button
      >
      <el-button
        v-if="keys == '1' || keys == '3'"
        type="primary"
        @click="submit('ruleForm')"
        >保存</el-button
      >
    </el-drawer>
  </div>
</template>
<script>
import { provinceAndCityData } from "element-china-area-data";
export default {
  data() {
    return {
      keys: "",
      visible: false,
      stordid: "",
      banktype: [],
      // banklist: [],
      city: provinceAndCityData,
      cardtype: [],
      accounttype: [],
      settlementType: [
        // { label: "结算到银行卡", value: "bankCard" },
        { label: "结算到支付宝账号", value: "alipayAccount" },
      ],
      ruleform: {
        merchant_type:
          "企业,营业执照上的主体类型一般为个体户、个体工商户、个体经营", //商户类型
        cert_image: "", //营业执照扫描件
        cert_no: "", //注册号
        name: "", //商户名
        legal_name: "", //法人名
        legal_cert_type: "", //证件类型
        //注册地址
        //营业期限
        legal_cert_front_image: "", //正面
        legal_cert_back_image: "", //反面
        //姓名
        legal_cert_no: "", //身份证号码
        alias_name: "", //商户别名
        default_settle_type: "结算到支付宝账号",
        // biz_cards: {
        //   usage_type: "", // 账户类型
        //   account_inst_name: "", //开户银行
        //   account_holder_name: "", //开户名
        //   bank_code: "", //银联号
        //   account_branch_name: "", //开户支行
        //   account_no: "", //银行账号
        //   account_inst_province: "", // 开户行所在地-省
        //   account_inst_city: "", // 开户行所在地-市
        //   account_type: "", //卡类型
        //   account_inst_id: "", //开户行简称缩写
        // },
        alipay_logon_id: "", //结算支付宝账号
        contact_infos: {
          name: "", // 超级管理员姓名
          mobile: "", //超级管理员电话
          id_card_no: "",
          email: "",
        },
        binding_alipay_logon_id: "", //签约支付宝账户
      },
      cert_dis: false,
      front_dis: false,
      back_dis: false,
      list1: [],
      list2: [],
      list3: [],
    };
  },
  methods: {
    show_dialog_fn(id, k) {
      this.visible = true;
      this.stordid = id;
      this.keys = k;
      // 获取账户类型
      // this.getbankType();
      // // 获取银行列表
      // this.getbankList();
      // 获取证件类型
      this.getaccounttype();
      // 获取银行卡类型
      // this.getbankCardType();
      if (k == 2 || k == 3) {
        this.getInfo();
      } else {
        this.getWchatDetail();
      }
    },
    getWchatDetail() {
      this.$http
        .get(
          "/admin/bill/index.php?act=storeMchAli&op=getAliDetailByWechatApply&store_id=" +
            this.stordid
        )
        .then((res) => {
          if (res.code == 1) {
            if(res.data){
              this.ruleform = { ...res.data };
            this.ruleform.merchant_type =
              "企业,营业执照上的主体类型一般为个体户、个体工商户、个体经营";
            this.ruleform.default_settle_rule = {};
            this.ruleform.default_settle_type = "结算到支付宝账号";
            this.ruleform.cert_image = res.data.cert_image.url;
            this.ruleform.legal_cert_back_image =
              res.data.legal_cert_back_image.url;
            this.ruleform.legal_cert_front_image =
              res.data.legal_cert_front_image.url;
            this.list1 =
              res.data.cert_image.url == ""
                ? []
                : [{ name: "", url: res.data.cert_image.url }];
            this.list2 =
              res.data.legal_cert_front_image.url == ""
                ? []
                : [{ name: "", url: res.data.legal_cert_front_image.url }];
            this.list3 =
              res.data.legal_cert_back_image.url == ""
                ? []
                : [{ name: "", url: res.data.legal_cert_back_image.url }];
          }else{
            this.reset();
          }
         }

        });
    },
    getInfo() {
      this.$http
        .post("/admin/bill/index.php?act=storeMchAli&op=mchDetail", {
          store_id: this.stordid,
        })
        .then((res) => {
          if (res.code == 1) {
            this.ruleform = { ...res.data };
            this.ruleform.merchant_type =
              res.data.merchant_type == "01"
                ? "企业,营业执照上的主体类型一般为个体户、个体工商户、个体经营"
                : "";
            this.ruleform.cert_image = res.data.cert_image.url || "";
            this.ruleform.legal_cert_back_image =
              res.data.legal_cert_back_image.url || "";
            this.ruleform.legal_cert_front_image =
              res.data.legal_cert_front_image.url || "";
            // let p = this.city.filter(
            //   (v) => v.label == res.data.biz_cards.account_inst_province
            // );
            // let c = p[0].children.filter(
            //   (k) => k.label == res.data.biz_cards.account_inst_city
            // );
            // this.ruleform.biz_cards.account_inst_province = [
            //   p[0].value,
            //   c[0].value,
            // ];
            this.list1 =
              res.data.cert_image.url == ""
                ? []
                : [{ name: "", url: res.data.cert_image.url }];
            this.list2 =
              res.data.legal_cert_front_image.url == ""
                ? []
                : [{ name: "", url: res.data.legal_cert_front_image.url }];
            this.list3 =
              res.data.legal_cert_back_image.url == ""
                ? []
                : [{ name: "", url: res.data.legal_cert_back_image.url }];
          }
        });
    },
    // getbankType() {
    //   this.$http
    //     .post(
    //       "/admin/bill/index.php?act=storeMchSetting&op=getBankAccountTypes&type=2"
    //     )
    //     .then((res) => {
    //       if (res.code == 1) {
    //         this.banktype = res.data;
    //       } else {
    //         alert(res.msg);
    //       }
    //     });
    // },
    getaccounttype() {
      this.$http
        .post(
          "/admin/bill/index.php?act=storeMchSetting&op=getIdentificationTypes&type=2"
        )
        .then((res) => {
          if (res.code == 1) {
            this.accounttype = res.data;
          } else {
            alert(res.msg);
          }
        });
    },
    // getbankCardType() {
    //   this.$http
    //     .post("/admin/bill/index.php?act=storeMchSetting&op=getBankCardTypes")
    //     .then((res) => {
    //       if (res.code == 1) {
    //         this.cardtype = res.data;
    //       } else {
    //         alert(res.msg);
    //       }
    //     });
    // },
    handleClose() {
      this.cancelForm();
    },
    cancelForm() {
      this.$confirm("确认关闭表单吗?")
        .then((_) => {
          this.visible = false;
          this.reset();
        })
        .catch((_) => {});
    },
    flieSuccess(file, fileList, name) {
      var formData = new FormData();
      formData.append("upload_file", file.raw);
      if (file.raw.size > 2097152) {
        fileList = "";
        this.$message({
          showClose: true,
          message: "上传文件不得大于2M",
          type: "error",
        });
        return;
      }
      this.$http
        .post("/admin/bill/index.php?act=storeMchAli&op=uploadImg", formData)
        .then((res) => {
          if (res.code == 1) {
            switch (name) {
              case "certificates":
                this.ruleform.cert_image = res.data.url;
                this.list1 = [{ name: "", url: res.data.url }];
                break;
              case "cardfront":
                this.ruleform.legal_cert_front_image = res.data.url;
                this.list2 = [{ name: "", url: res.data.url }];
                break;
              case "cardback":
                this.ruleform.legal_cert_back_image = res.data.url;
                this.list3 = [{ name: "", url: res.data.url }];
                break;
            }
          }
        });
    },
    removePicture(file, list, name) {
      switch (name) {
        case "certificates":
          this.ruleform.cert_image = "";
          this.list1 = [];
          break;
        case "cardfront":
          this.ruleform.legal_cert_front_image = "";
          this.list2 = [];
          break;
        case "cardback":
          this.ruleform.legal_cert_back_image = "";
          this.list3 = [];
          break;
      }
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let item = this.ruleform;
          const data = {};
          data.store_id = this.stordid || "";
          data.merchant_type = "01" || "";
          data.cert_image = item.cert_image || "";
          data.cert_no = item.cert_no || "";
          data.name = item.name || "";
          data.legal_name = item.legal_name || "";
          data.legal_cert_type = item.legal_cert_type || "";
          data.legal_cert_front_image = item.legal_cert_front_image || "";
          data.legal_cert_back_image = item.legal_cert_back_image || "";
          data.legal_cert_no = item.legal_cert_no || "";
          data.alias_name = item.alias_name || "";
          // if (item.default_settle_type == "bankCard") {
          //   data.default_settle_type = "bankCard";
          //   data.biz_cards = {};
          //   data.biz_cards.usage_type = item.biz_cards.usage_type || "";
          //   data.biz_cards.account_inst_name =
          //     item.biz_cards.account_inst_name || "";
          //   data.biz_cards.account_holder_name =
          //     item.biz_cards.account_holder_name || "";
          //   data.biz_cards.bank_code = item.biz_cards.bank_code || "";
          //   data.biz_cards.account_branch_name =
          //     item.biz_cards.account_branch_name || "";
          //   data.biz_cards.account_no = item.biz_cards.account_no || "";
          //   let p =
          //     this.city.filter(
          //       (v) => v.value == item.biz_cards.account_inst_province[0]
          //     ) || "";
          //   let c =
          //     p[0].children.filter(
          //       (v) => v.value == item.biz_cards.account_inst_province[1]
          //     ) || "";
          //   data.biz_cards.account_inst_province = p[0].label || "";
          //   data.biz_cards.account_inst_city = c[0].label || "";
          //   data.biz_cards.account_type = item.biz_cards.account_type || "";
          //   data.biz_cards.account_inst_id =
          //     item.biz_cards.account_inst_id || "";
          // } else if (item.default_settle_type == "alipayAccount") {
          data.default_settle_type = "alipayAccount";
          data.alipay_logon_id = item.alipay_logon_id || "";
          // }
          data.contact_infos = {};
          data.contact_infos.name = item.contact_infos.name || "";
          data.contact_infos.mobile = item.contact_infos.mobile || "";
          data.contact_infos.id_card_no = item.contact_infos.id_card_no || "";
          data.contact_infos.email = item.contact_infos.email || "";
          data.binding_alipay_logon_id = item.binding_alipay_logon_id || "";
          this.$http
            .post("/admin/bill/index.php?act=storeMchAli&op=apply", data)
            .then((res) => {
              if (res.code == 1) {
                this.visible = false;
                this.reset();
              } else {
                this.$message.error(res.msg);
              }
            });
        } else {
          return false;
        }
      });
    },
    reset() {
      this.ruleform = {
        merchant_type: "", //商户类型
        cert_image: '', //营业执照扫描件
        cert_no: "", //注册号
        name: "", //商户名
        legal_name: "", //法人名
        legal_cert_type: "", //证件类型
        //注册地址
        //营业期限
        legal_cert_type: "",
        legal_cert_front_image: '', //正面
        legal_cert_back_image: '', //反面
        //姓名
        legal_cert_no: "", //身份证号码
        alias_name: "", //商户别名
        default_settle_type: "alipayAccount",
        // biz_cards: {
        //   usage_type: "", // 账户类型
        //   account_inst_name: "", //开户银行
        //   account_holder_name: "", //开户名
        //   bank_code: "", //银联号
        //   account_branch_name: "", //开户支行
        //   account_no: "", //银行账号
        //   account_inst_province: "", // 开户行所在地-省
        //   account_inst_city: "", // 开户行所在地-市
        //   account_type: "", //卡类型
        //   account_inst_id: "", //开户行简称缩写
        // },
        alipay_logon_id: "", //结算支付宝账号
        contact_infos: {
          name: "", // 超级管理员姓名
          mobile: "", //超级管理员电话
          id_card_no: "",
          email: "",
        },
        binding_alipay_logon_id: "", //签约支付宝账户
      };
      this.list1=[];
      this.list2=[];
      this.list3=[];
    },
  },
};
</script> 
<style lang="scss" scoped>
/deep/.el-drawer__body {
  overflow-y: auto;
  padding-bottom: 30px;
}
.el-form {
  display: flex;
  flex-direction: row;
  .titles {
    margin: 10px 0px 10px 60px;
    font-weight: 600;
  }
  .el-form-item {
    margin-left: 80px;
    position: relative;
    .must-icon {
      color: red;
    }
    .tips {
      position: absolute;
      left: 340px;
      top: 34px;
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
  }

  .el-input,
  .el-select,
  .el-cascader {
    width: 300px;
    font-size: 12px;
  }
  .left {
    width: 50%;
  }
  .right {
    width: 50%;
  }
}
.sunmit_btn {
  margin-left: 80px;
  margin-top: 20px;
}
.disable /deep/.el-upload--picture-card {
  display: none;
}
.nodisable /deep/.el-upload--picture-card {
  display: inline-block;
}
.imgs {
  width: 148px;
  height: 148px;
}
</style>